<template>
  <view class="container">
    <view class="header-status-text" v-if="!$wechat.isWechat()" :style="{paddingTop: 88+'rpx'}">
      <view class="title-top">大爆炸思维</view>
    </view>
    <view style="padding: 0 40rpx;">
      <!-- 轮播图 -->
      <view class="header-imag">
        <view class="banner">
          <view class="banner-box">
            <swiper autoplay :circular="true" style="overflow: hidden;" duration="400">
              <swiper-item>
                <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/banner.png" class="bannerImg" mode="aspectFill"
                  style="border-radius: 20rpx;overflow: hidden;"></image>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
    </view>
    <!-- 精品推荐 -->
   <view class="Systematic-learning">
      <view class="syste-title">体验课学习</view>
      <view class="lear-img-name" @click="bannerClick('/pages/home/iostrialclass?platform='+fromPary.platform+'&phonenumber='+fromPary.phone)">
        <view class="lear-img">
          <image class="imgs"
            src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/exp_log.png"></image>
         <view class="system-log">
            <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/system_log.png">
            </image>
            <view class="system_name">体验课</view>
          </view>
        </view>
        <view style="width: 256rpx; height: 240rpx;"></view>
        <view class="name-btn">
          <view class="btn-p1">体验课</view>
          <view class="name">思维建模编程课</view>
          <view class="price-btn">
            <view class="price">￥12</view>
            <view class="primary btn-zoom"  @click="bannerClick('/pages/home/iostrialclass?platform='+fromPary.platform+'&phonenumber='+fromPary.phone)">立即购买</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 系统学习 -->
    <view class="Systematic-learning">
      <view class="syste-title">系统学习</view>
      <view class="lear-img-name" @click="bannerClick('/pages/home/iossystem?platform='+fromPary.platform+'&phonenumber='+fromPary.phone)">
        <view class="lear-img">
          <image class="imgs"
            src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/system_log.png"></image>
         <view class="system-log">
            <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/system_log.png">
            </image>
            <view class="system_name">季度课</view>
          </view>
        </view>
        <view style="width: 256rpx; height: 240rpx;"></view>
        <view class="name-btn">
          <view class="btn-p1">系统课</view>
          <view class="name">思维建模编程课</view>
          <view class="price-btn">
            <view class="price">￥388</view>
            <view class="primary btn-zoom"  @click="bannerClick('/pages/home/iossystem?platform='+fromPary.platform+'&phonenumber='+fromPary.phone)">立即购买</view>
          </view>
        </view>
      </view>
    </view>
    <view class="app-name">大爆炸思维</view>
  </view>
</template>

<script>
  import luoButton from '../../components/botton/luo-botton.vue'
  import {
    $POST,
    $GET
  } from '@/utils/api.js'
  export default {
    components: {
      luoButton
    },
    data() {
      return {
        videoList: [],
        videoUrl: '', // 视频地址
        videoImgBack: '', // 视频第一帧图
        statuHeight: uni.getSystemInfoSync().statusBarHeight, // 状态栏高度
        showTop: "block",
        bgcolor: 1,
        topTitle: false,
        swipers: [], // 轮播图数据
        fromPary:{
          platform:'',
          phone:''
        }
      }
    },
    onReady() {},
    onLoad(params) {
       const vm = this
       if(params.platform) {
         let platform = params.platform.toLowerCase() // 转小写
         vm.fromPary.platform = platform
       }
        if(vm.$auth.getUrlPrams("phonenumber")) {
         vm.fromPary.phone = vm.$auth.getUrlPrams("phonenumber")
       }
      this.gethomeData()
      vm.$wechat.unseBehavior()
    },
    mounted() {},
    methods: {
      // 首页数据
      async gethomeData() {
        const res = await $POST('https://openapi.jinlinjishu.com/mall_api/Api/Page/GetPageConfig', {
          code: "mobile_home"
        })
        res.data.items.forEach(item => {
          if (item.widgetCode === 'video') {
            this.videoList = item.parameters.list.filter(j => j)
            this.videoUrl = this.videoList[0].url
            this.videoImgBack = this.videoList[0].image
          }
          if (item.widgetCode === 'imgSlide') {
            this.swipers = item.parameters.list.filter(x => x)
          }
        })
      },
      //  跳页面函数
      bannerClick(path) {
        uni.navigateTo({
          url: path
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background: #ffffff;
    padding: 0 0rpx 132rpx 0rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }

    .header-status-text {
      width: 100%;

      .title-top {
        padding-left: 40rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: left;
        font-size: 32rpx;
        font-weight: bold;
      }

      .Subtitle-top {
        padding: 0 40rpx;
        font-weight: bold;
        font-size: 36rpx;
        margin: 20rpx 0 32rpx 0rpx;
      }
    }

    .header-imag {
      .banner {
        background: #fff;

        .banner-box {
          height: 280rpx;
          overflow: hidden;
          border-radius: 20rpx;

          swiper {
            width: 100%;
            height: 100%;
            display: block;
            margin: auto;

            .bannerImg {
              display: block;
              width: 100%;
              height: 100%;
              // margin-left:10px;
            }
          }
        }
      }
    }

    .Systematic-learning {
      margin-top: 48rpx;

      .syste-title {
        color: #262626;
        font-weight: 500;
        font-size: 32rpx;
        padding: 0 40rpx;
        padding-bottom: 56rpx;
      }

      .lear-img-name {
        width: 670rpx;
        margin: auto;
        background: #FFFFFF;
        box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.08);
        border-radius: 30rpx;
        display: flex;
        position: relative;

        .lear-img {
          width: 256rpx;
          height: 272rpx;
          position: absolute;
          bottom: 0rpx;
          left: 0;

          .imgs {
            width: 100%;
            height: 100%;
            border-radius: 30rpx;
          }

          .system-log {
            width: 120rpx;
            height: 40rpx;
            position: absolute;
            top: -12rpx;
            left: 0;

            .system_name {
              font-size: 24rpx;
              color: #FFFFFF;
              position: absolute;
              top: 2rpx;
              left: 18rpx;
            }
          }
        }

        .name-btn {
          width: 384rpx;
          padding: 32rpx 16rpx 16rpx 24rpx;

          .btn-p1 {
            display: inline;
            padding: 6rpx 36rpx;
            background: #FFD8B5;
            border-radius: 22rpx;
            font-size: 24rpx;
            color: #FF800C;
          }

          .name {
            font-weight: 500;
            font-size: 32rpx;
            color: #262626;
            margin: 16rpx 0 40rpx 0;
          }

          .price-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .price {
              color: #FF800C;
              font-weight: bold;
              font-size: 40rpx;
            }

            .primary {
              width: 160rpx;
              height: 48rpx;
              line-height: 48rpx;
              background: #FF800C;
              text-align: center;
              color: #FFFFFF;
              font-size: 24rpx;
              border-radius: 24rpx;
            }
          }
        }
      }
    }

    .app-name {
      color: #EEEEEE;
      font-weight: bold;
      font-size: 36rpx;
      padding: 30rpx 0;
      text-align: center;
    }

    // 定位顶部老师的狗皮膏药
    .position-top {
      position: fixed;
      left: 0;
      right: 0;
      top: 165rpx;
      // margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;

      .teacher-animation {
        animation-fill-mode: both;
        animation: teacher-animation 2s forwards 0.1s;
      }

      .begin-anima {
        animation-name: begin-anima;
        -webkit-animation-name: begin-anima;
        animation-duration: 1s;
        -webkit-animation-duration: 1s;
        animation-timing-function: ease-in-out;
        -webkit-animation-timing-function: ease-in-out;
        visibility: visible !important;
        animation-fill-mode: forwards;
        // animation: begin-anima 2s forwards 0.1s;
      }

      @keyframes teacher-animation {
        0% {
          -webkit-transform: translate(0);
          -moz-transform: translate(0);
          -ms-transform: translate(0);
          transform: translate(0);
          opacity: 1;
        }

        100% {
          -webkit-transform: translate(120%);
          -moz-transform: translate(120%);
          -ms-transform: translate(120%);
          transform: translate(120%);
          opacity: 0;
        }
      }

      @keyframes begin-anima {
        0% {
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -ms-transform: translateX(100%);
          transform: translateX(100%);
          opacity: 0;
        }

        100% {
          -webkit-transform: translateX(0);
          -moz-transform: translateX(0);
          -ms-transform: translateX(0);
          transform: translateX(0);
          opacity: 1;
        }
      }

      .animation-circle {
        width: 80rpx;
        height: 80rpx;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 38rpx 0px 0px 38rpx;
        z-index: 99;
        display: flex;
        align-items: center;

        .img-box {
          width: 72rpx;
          height: 72rpx;
          margin-left: 5rpx;
        }
      }
    }

    .gif-img {
      width: 100%;
      height: 300rpx;
    }



  }
</style>
